/* eslint-disable array-callback-return */
import React from 'react';
import { connect } from 'dva';
import { PlusOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Modal,
  Row,
  Col,
  Input,
  Table,
  Button,
  Divider,
  Select,
  Cascader,
  Radio,
  message,
  InputNumber,
  Spin,
  Popconfirm,
} from 'antd';
import styles from '@/utils/utils.less';

const FormItem = Form.Item;
const { Option } = Select;

@connect(({ invbycustsupp, loading }) => ({
  invbycustsupp,
  expensesData: invbycustsupp.expensesData,
  loading: loading.models.invbycustsupp,
}))
@Form.create()
class FileUpload extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      number: 1, // 发票个数
      invPayType: '1', // 发票付费方式
      FM_INV_RULE_TYPE: [], // 开票类型
      FM_INV_FEE_TYPE: [], // 费用类型
      FM_INV_RULE_WAY: [], // 交付方式
      provCityAreaList: [], // 邮寄地址
      modalData: {
        // 发票抬头
        invCompany: {},
        // 邮寄地址
        invMail: {},
        // 发票项
        invTerm: [
          {
            key: 1,
            number: 1,
            pdId: '',
            bilingType: '',
            number3: '',
            invRatio: '',
          },
        ],
      },
      sumPrice: 0,
      pdList: [], // 产品下拉
      invoiceType: null, // 开票类型   禁不禁用
      payTypeMailList: [], // 邮件
    };
  }

  componentDidMount() {
    const { onRef } = this.props;
    // 获取单个发票详情
    onRef(this);
    this.getDetail();
  }

  // 查询省市区
  getAreaList = (areaId, callback) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'custedit/getAreaList',
      payload: { parentId: areaId },
    }).then(res => {
      if (res.success && res.data.length) {
        callback(res.data);
      } else {
        message.warning(`${res.message || '暂无数据！'}`);
      }
    });
  };

  // 计算金额合计
  moneyTotal = (value, key, target) => {
    const { modalData } = this.state;
    if (target === 'invAmount') {
      modalData.invTerm.map(item => {
        const temp = item;
        if (item.number === key) {
          temp.invAmount = value;
        }
        return true;
      });
    }
    const fee = modalData.invTerm.reduce(
      (total, currentValue) => total + currentValue.invAmount || 0,
      0
    );
    if (typeof fee === 'string') {
      this.setState({ sumPrice: Number(fee) });
    } else {
      this.setState({ sumPrice: fee });
    }
  };

  // 改变产品
  changepdBillType = (value, key, target, id) => {
    const { modalData } = this.state;
    const { dispatch, expensesData, form } = this.props;
    modalData.invTerm.map(item => {
      const temp = item;
      if (item.number === key) {
        if (target === 'pd') {
          temp.pdId = value;
          if (item.bilingType) {
            form.resetFields([`invTerm${id}`]);
            temp.invTerm = '';
            dispatch({
              type: 'invbycustsupp/getInvoiceRate',
              payload: { serType: expensesData.serType, pdId: value, bilingType: item.bilingType },
            }).then(res => {
              if (res.success) {
                temp.invoiceItemList = res.data;
                temp.invRatio = '';
                this.setState({
                  modalData: { ...modalData },
                });
              } else {
                message.warning(res.message || '获取开票项目失败');
              }
            });
          }
        } else {
          temp.bilingType = value;
          if (item.pdId) {
            form.resetFields([`invTerm${id}`]);
            temp.invTerm = '';
            dispatch({
              type: 'invbycustsupp/getInvoiceRate',
              payload: { serType: expensesData.serType, pdId: item.pdId, bilingType: value },
            }).then(res => {
              if (res.success) {
                temp.invoiceItemList = res.data;
                temp.invRatio = '';
                this.setState({
                  modalData: { ...modalData },
                });
              } else {
                message.warning(res.message || '获取开票项目失败');
              }
            });
          }
        }
      }
      return true;
    });
  };

  // 获取开票项目
  invoiceItem = (value, record) => {
    const { modalData } = this.state;
    modalData.invTerm.map(item => {
      const temp = item;
      if (item.number === record.number) {
        temp.invTerm = value;
        item.invoiceItemList.map(items => {
          if (items.termId === value) {
            temp.invRatio = items.invRatio;
          }
          return true;
        });
      }
      this.setState({
        modalData: { ...modalData },
      });
      return true;
    });
  };

  // 地区选择：省市区
  selectProvCityArea = (value, selectedOptions) => {
    const { form } = this.props;
    let mailArea = '';
    selectedOptions.map((item, index) => {
      mailArea += (index > 0 ? '/' : '') + item.areaName;
      return true;
    });
    mailArea = mailArea.trim();
    form.setFieldsValue({ mailArea });
  };

  // 动态加载数据
  loadAreaData = selectedOptions => {
    const { provCityAreaList } = this.state;
    const targetOption = selectedOptions[selectedOptions.length - 1];
    const parentId = selectedOptions[selectedOptions.length - 1].value;
    targetOption.loading = true;
    const childrenData = [];
    this.getAreaList(parentId, data => {
      data.map(item => {
        const temp = item;
        temp.isLeaf = item.areaNature === 6;
        temp.label = item.areaName;
        temp.value = item.areaId;
        childrenData.push(item);
        return true;
      });
    });
    setTimeout(() => {
      targetOption.loading = false;
      targetOption.children = childrenData;
      this.setState({
        provCityAreaList: [...provCityAreaList],
      });
    }, 1000);
  };

  // 改变开票类型
  changeInvType = e => {
    const { modalData } = this.state;
    modalData.invCompany.invType = e;
    this.setState({
      ...modalData,
      invoiceType: e,
    });
  };

  // 新增发票
  addInvList = () => {
    const { modalData, number } = this.state;
    const newInv = {
      key: number + 1,
      number: (modalData.invTerm && modalData.invTerm.length + 1) || 1,
      pdId: '',
      bilingType: '',
      number3: '',
      invRatio: '',
    };
    modalData.invTerm.push(newInv);
    const newModalData = JSON.parse(JSON.stringify(modalData));
    this.setState({
      number: number + 1,
      modalData: newModalData,
    });
  };

  // 删除发票
  deleteInv = row => {
    const { modalData } = this.state;
    const newData = [];
    modalData.invTerm.map(item => {
      if (item.key !== row.key) {
        newData.push(item);
      }
      return true;
    });
    newData.map((nitem, nindex) => {
      const temp = nitem;
      temp.number = nindex + 1;
      return true;
    });
    modalData.invTerm = newData;
    this.setState({
      ...modalData,
    });
    this.moneyTotal(); // 计算总计金额
  };

  // 改变发票交付方式
  changeInvPayType = e => {
    this.setState({
      invPayType: e.target.value,
    });
  };

  // 提交数据
  submitModal = () => {
    const {
      form,
      dispatch,
      addOrDetail,
      expensesData,
      handleModalVisible,
      custSuppId,
      contIdList,
      isCustSupp,
      detailParams,
      // amountNoInv,
      orderInv, // 第几个发票
    } = this.props;
    const { modalData } = this.state;
    form.validateFieldsAndScroll((err, value) => {
      if (!err) {
        // 发票抬头信息
        modalData.invCompany.invType = value.invType; // 开票类型
        modalData.invCompany.holderName = value.holderName; // 单位名称
        modalData.invCompany.taxerIdNo = value.taxerIdNo; // 纳税人识别号
        modalData.invCompany.holderAddrs = value.holderAddrs; // 单位地址
        modalData.invCompany.phone = value.phone; // 电话
        modalData.invCompany.bankOfDepoName = value.bankOfDepoName; // 开户行
        modalData.invCompany.bankAcco = value.bankAcco; // 银行卡号
        modalData.invCompany.remark = value.remark; // 备注
        // 发票邮寄地址
        if (value.invType === '1' || value.invType === '3') {
          // 纸质普票和增值税专票
          modalData.invMail.contPerName = value.contPerName; // 联系人姓名
          modalData.invMail.contPerPhone = value.contPerPhone; // 联系人电话
          modalData.invMail.mailArea = value.mailArea && value.mailArea[value.mailArea.length - 1]; // 邮寄地址
          modalData.invMail.mailAddr = value.mailAddr; // 详细地址
          modalData.invMail.invPay = value.invPay; // 发票交付方式
        } else {
          // 电子普票
          modalData.invMail.invPay = value.invPayE; // 发票交付方式
          modalData.invMail.email = value.email; // 邮箱地址
        }
        const paramet = {
          invRulePanyTermMailDto: [modalData],
          // 模态框外面的数据
          contId: contIdList[0], // 合同id
          custSuppId, // 客户或者签约方/供应商id
          fullyFlag: expensesData.fullyFlag || null,
          serType: expensesData.serType || null, // 服务类型
          invType: value.invType, // 开票类型
        };
        // let allMoney = 0;
        let othCostMoney = 0; // 服务费
        let agtsrvInsMoney = 0; // 社保
        let agtsrvAccuMoney = 0; // 公积金
        let agtsrvWageMoney = 0; // 代发工资
        let agtsrvArchvMoney = 0; // 代收档案费
        let agtsrvTaxMoney = 0; // 代报税金额
        if (addOrDetail === 1) {
          // 所有的开票类型和钱
          const allInvItem = [];
          if (expensesData.invApplyDto) {
            expensesData.invApplyDto.invApplyBillOptVo.map(item => {
              item.invTermMoney.map(items => {
                const temp = items;
                allInvItem.push(temp);
                if (items.pdId === 'PDINF_0000000001') {
                  temp.agtsrvIns = items.invAmount;
                }
                if (items.pdId === 'PDINF_0000000002') {
                  temp.agtsrvAccu = items.invAmount;
                }
                if (items.pdId === 'PDINF_0000000003') {
                  temp.agtsrvArchv = items.invAmount;
                }
                if (items.pdId === 'PDINF_0000000004') {
                  temp.agtsrvWage = items.invAmount;
                }
                if (items.pdId === 'PDINF_0000000001') {
                  temp.agtsrvIns = items.invAmount;
                }
                if (items.pdId === 'PDINF_0000000005') {
                  temp.agtsrvTax = items.invAmount;
                }
              });
            });
          }

          // 新增弹框的钱
          paramet.invRulePanyTermMailDto.map(mitem => {
            mitem.invTerm.map(additem => {
              const temp = additem;
              allInvItem.push(additem);
              if (additem.pdId === 'PDINF_0000000001') {
                temp.agtsrvIns = additem.invAmount;
              }
              if (additem.pdId === 'PDINF_0000000002') {
                temp.agtsrvAccu = additem.invAmount;
              }
              if (additem.pdId === 'PDINF_0000000003') {
                temp.agtsrvArchv = additem.invAmount;
              }
              if (additem.pdId === 'PDINF_0000000004') {
                temp.agtsrvWage = additem.invAmount;
              }
              if (additem.pdId === 'PDINF_0000000001') {
                temp.agtsrvIns = additem.invAmount;
              }
              if (additem.pdId === 'PDINF_0000000005') {
                temp.agtsrvTax = additem.invAmount;
              }
            });
          });
          // bilingType ： 1服务费，2 各产品的钱
          // 服务费把钱加起来，代收代付根据产品把钱合起来 1 服务费，2  代收代付
          allInvItem.map(alitem => {
            Number(alitem.bilingType);
            if (+alitem.bilingType === 1) {
              othCostMoney += alitem.invAmount;
            } else {
              if (alitem.agtsrvIns) {
                agtsrvInsMoney += alitem.invAmount;
              }
              if (alitem.agtsrvAccu) {
                agtsrvAccuMoney += alitem.invAmount;
              }
              if (alitem.agtsrvWage) {
                agtsrvWageMoney += alitem.invAmount;
              }
              if (alitem.agtsrvArchv) {
                agtsrvArchvMoney += alitem.invAmount;
              }
              if (alitem.agtsrvTax) {
                agtsrvTaxMoney += alitem.invAmount;
              }
            }
          });
          // 将合起来的钱  与  后台返的钱作比较
          if (expensesData.othCost < othCostMoney) {
            message.warning('服务费的合计开票金额大于可开票金额，不可提交，请调整');
            return;
          }
          if (expensesData.agtsrvIns < agtsrvInsMoney) {
            message.warning('代收社保的合计开票金额大于可开票金额，不可提交，请调整');
            return;
          }
          if (expensesData.agtsrvAccu < agtsrvAccuMoney) {
            message.warning('代收公积金的合计开票金额大于可开票金额，不可提交，请调整');
            return;
          }
          if (expensesData.agtsrvWage < agtsrvWageMoney) {
            message.warning('代发工资的合计开票金额大于可开票金额，不可提交，请调整');
            return;
          }
          if (expensesData.agtsrvArchv < agtsrvArchvMoney) {
            message.warning('代收档案费的合计开票金额大于可开票金额，不可提交，请调整');
            return;
          }
          if (expensesData.agtsrvTax < agtsrvTaxMoney) {
            message.warning('代报税金额的合计开票金额大于可开票金额，不可提交，请调整');
            return;
          }
        } else {
          // 未开票金额 和 合计金额作比较.
          const newModalData = [];
          const allInvItem = [];
          expensesData.invApplyDto.invApplyBillOptVo.map((eitem, eindex) => {
            if (eindex !== orderInv) {
              newModalData.push(eitem);
            }
          });
          // 第二页的列表的数据（除了点击的这个）
          newModalData.map(nitem => {
            nitem.invTermMoney.map(items => {
              const temp = items;
              allInvItem.push(temp);
              if (items.pdId === 'PDINF_0000000001') {
                temp.agtsrvIns = items.invAmount;
              }
              if (items.pdId === 'PDINF_0000000002') {
                temp.agtsrvAccu = items.invAmount;
              }
              if (items.pdId === 'PDINF_0000000003') {
                temp.agtsrvArchv = items.invAmount;
              }
              if (items.pdId === 'PDINF_0000000004') {
                temp.agtsrvWage = items.invAmount;
              }
              if (items.pdId === 'PDINF_0000000001') {
                temp.agtsrvIns = items.invAmount;
              }
              if (items.pdId === 'PDINF_0000000005') {
                temp.agtsrvTax = items.invAmount;
              }
            });
          });
          // 新增弹框的钱
          paramet.invRulePanyTermMailDto.map(mitem => {
            mitem.invTerm.map(additem => {
              const temp = additem;
              allInvItem.push(temp);
              if (additem.pdId === 'PDINF_0000000001') {
                temp.agtsrvIns = additem.invAmount;
              }
              if (additem.pdId === 'PDINF_0000000002') {
                temp.agtsrvAccu = additem.invAmount;
              }
              if (additem.pdId === 'PDINF_0000000003') {
                temp.agtsrvArchv = additem.invAmount;
              }
              if (additem.pdId === 'PDINF_0000000004') {
                temp.agtsrvWage = additem.invAmount;
              }
              if (additem.pdId === 'PDINF_0000000001') {
                temp.agtsrvIns = additem.invAmount;
              }
              if (additem.pdId === 'PDINF_0000000005') {
                temp.agtsrvTax = additem.invAmount;
              }
            });
          });
          // bilingType ： 1服务费，2 各产品的钱
          // 服务费把钱加起来，代收代付根据产品把钱合起来 1 服务费，2  代收代付
          allInvItem.map(alitem => {
            Number(alitem.bilingType);
            if (+alitem.bilingType === 1) {
              othCostMoney += alitem.invAmount;
            } else {
              if (alitem.agtsrvIns) {
                agtsrvInsMoney += alitem.invAmount;
              }
              if (alitem.agtsrvAccu) {
                agtsrvAccuMoney += alitem.invAmount;
              }
              if (alitem.agtsrvWage) {
                agtsrvWageMoney += alitem.invAmount;
              }
              if (alitem.agtsrvArchv) {
                agtsrvArchvMoney += alitem.invAmount;
              }
              if (alitem.agtsrvTax) {
                agtsrvTaxMoney += alitem.invAmount;
              }
            }
          });
          // 将合起来的钱  与  后台返的钱作比较
          if (expensesData.othCost < othCostMoney) {
            message.warning('服务费的合计开票金额大于可开票金额，不可提交，请调整');
            return;
          }
          if (expensesData.agtsrvIns < agtsrvInsMoney) {
            message.warning('代收社保的合计开票金额大于可开票金额，不可提交，请调整');
            return;
          }
          if (expensesData.agtsrvAccu < agtsrvAccuMoney) {
            message.warning('代收公积金的合计开票金额大于可开票金额，不可提交，请调整');
            return;
          }
          if (expensesData.agtsrvWage < agtsrvWageMoney) {
            message.warning('代发工资的合计开票金额大于可开票金额，不可提交，请调整');
            return;
          }
          if (expensesData.agtsrvArchv < agtsrvArchvMoney) {
            message.warning('代收档案费的合计开票金额大于可开票金额，不可提交，请调整');
            return;
          }
          if (expensesData.agtsrvTax < agtsrvTaxMoney) {
            message.warning('代报税金额的合计开票金额大于可开票金额，不可提交，请调整');
            return;
          }
        }
        if (addOrDetail === 1) {
          if (isCustSupp === '1' || isCustSupp === '2') {
            paramet.custSuppIdType = '1';
          } else {
            paramet.custSuppIdType = '2';
          }
          paramet.contNo = isCustSupp;
          dispatch({
            type: 'invbycustsupp/addInvData',
            payload: paramet,
          }).then(res => {
            if (res.success) {
              message.success('提交成功');
              handleModalVisible(addOrDetail, false);
              this.setState({
                modalData: {
                  invCompany: {},
                  invMail: {},
                  invTerm: [
                    {
                      key: 1,
                      number: 1,
                      pdId: '',
                      bilingType: '',
                      number3: '',
                      invRatio: '',
                    },
                  ],
                },
                invPayType: '1',
                sumPrice: 0,
              });
              form.resetFields();
            } else {
              message.warning(res.message || '提交失败：服务端未知错误');
            }
          });
        } else {
          paramet.invRuleId = detailParams.invCompany.invCompanyId;
          dispatch({
            type: 'invbycustsupp/updateInvData',
            payload: paramet,
          }).then(res => {
            if (res.success) {
              message.success('提交成功');
              handleModalVisible(addOrDetail, false);
              this.setState({
                modalData: {
                  invCompany: {},
                  invMail: {},
                  invTerm: [
                    {
                      key: 1,
                      number: 1,
                      pdId: '',
                      bilingType: '',
                      number3: '',
                      invRatio: '',
                    },
                  ],
                },
                invPayType: '1',
                sumPrice: 0,
              });
              form.resetFields();
            } else {
              message.warning(res.message || '提交失败：服务端未知错误');
            }
          });
        }
      }
    });
  };

  // 点击修改的时候，加loading
  changeUpdate = () => {
    const { handleModalVisible, addOrDetail } = this.props;
    const { modalData } = this.state;
    this.update(modalData.invMail.areaList);
    handleModalVisible(addOrDetail, false);
  };

  // 点击修改时获取省市区
  update = areaList => {
    const areaIdList = [];
    const { provCityAreaList } = this.state;
    const cityData = [];
    const countyData = [];
    areaList.forEach(item => {
      areaIdList.push(item.areaId);
    });
    switch (areaIdList.length) {
      case 1:
        break;
      case 2:
        this.getAreaList(areaIdList[0], data => {
          data.map(area => {
            cityData.push({
              label: area.areaName,
              value: area.areaId,
              isLeaf: area.areaNature === 6,
            });
          });
          provCityAreaList.map(p => {
            const temp = p;
            if (p.areaId === areaIdList[0]) {
              temp.children = cityData;
            }
          });
          this.setState({ provCityAreaList }, () => {
            this.getInvTermItem();
          });
        });
        break;
      case 3:
        // 获取市
        this.getAreaList(areaIdList[0], data => {
          data.map(area => {
            cityData.push({
              label: area.areaName,
              value: area.areaId,
              isLeaf: area.areaNature === 6,
            });
          });
          provCityAreaList.map(p => {
            const temp = p;
            if (p.areaId === areaIdList[0]) {
              temp.children = cityData;
            }
          });
          // 获取区县
          this.getAreaList(areaIdList[1], datas => {
            datas.map(area => {
              countyData.push({
                label: area.areaName,
                value: area.areaId,
                isLeaf: area.areaNature === 6,
              });
            });
            provCityAreaList.map(p => {
              if (p.areaId === areaIdList[0]) {
                // 判断省
                p.children.map(c => {
                  const temp = c;
                  if (c.value === areaIdList[1]) {
                    // 判读市
                    temp.children = countyData;
                  }
                });
              }
            });
            this.setState({ provCityAreaList }, () => {
              this.getInvTermItem();
            });
          });
        });
        break;
      default:
        break;
    }
  };

  // 每一行数据获取开票项目
  getInvTermItem = () => {
    const { modalData } = this.state;
    const { dispatch, expensesData } = this.props;
    modalData.invTerm.map(mitem => {
      const newMitem = mitem;
      dispatch({
        type: 'invbycustsupp/getInvoiceRate',
        payload: {
          serType: expensesData.serType,
          pdId: mitem.pdId,
          bilingType: mitem.bilingType,
        },
      }).then(res => {
        if (res.success) {
          if (res.data.length) {
            res.data.map(ritems => {
              const temp = ritems;
              temp.termId = ritems.termId.toString();
            });
          }
          newMitem.invoiceItemList = res.data;
          this.setState({
            modalData: { ...modalData },
          });
        } else {
          message.warning(res.message || '获取开票项目失败');
        }
      });
    });
  };

  // 获取该发票的详情
  getDetail = () => {
    const { dispatch, detail, detailParams, addOrDetail } = this.props;
    let modalData = {
      invCompany: {},
      invMail: {},
      invTerm: [
        {
          key: 1,
          number: 1,
          pdId: '',
          bilingType: '',
          number3: '',
          invRatio: '',
        },
      ],
    };
    if (detail === 1 || detail === 2) {
      dispatch({
        type: 'publicdata/fetchDictCode',
        payload: ['FM_INV_RULE_TYPE', 'FM_INV_FEE_TYPE', 'FM_INV_RULE_WAY'],
      }).then(res => {
        const invDiction = [];
        const payType = [];
        const payTypeMailList = [];
        if (
          res &&
          res.FM_INV_RULE_TYPE &&
          res.FM_INV_RULE_TYPE.length &&
          res.FM_INV_FEE_TYPE &&
          res.FM_INV_FEE_TYPE.length &&
          res.FM_INV_RULE_WAY &&
          res.FM_INV_RULE_WAY.length
        ) {
          res.FM_INV_RULE_TYPE.map(ditem => {
            if (ditem.itemCode !== '4' && ditem.itemCode !== '5') {
              invDiction.push(ditem);
            }
          });
          res.FM_INV_RULE_WAY.map(ditem => {
            if (ditem.itemCode !== '3') {
              payType.push(ditem);
            } else {
              payTypeMailList.push(ditem);
            }
          });
          this.setState({
            FM_INV_RULE_TYPE: invDiction,
            FM_INV_FEE_TYPE: res.FM_INV_FEE_TYPE,
            FM_INV_RULE_WAY: payType,
            payTypeMailList,
          });
        }
      });
      // 获取产品下拉
      dispatch({
        type: 'invbycustsupp/getPdList',
        payload: {},
      }).then(response => {
        if (response && response.success) {
          this.setState({
            pdList: response.data,
          });
        } else {
          this.setState({
            pdList: [],
          });
        }
      });
      this.getAreaList(null, data => {
        data.map(items => {
          const temp = items;
          temp.label = items.areaName;
          temp.value = items.areaId;
          temp.isLeaf = false;
        });
        this.setState({ provCityAreaList: data });
      });
    }

    if (detail === 1) {
      dispatch({
        type: 'invbycustsupp/getDetailData',
        payload: detailParams,
      }).then(res => {
        if (res && res.success) {
          res.data[0].invCompany.invType = res.data[0].invCompany.invType.toString();
          res.data[0].invTerm.map(items => {
            const temp = items;
            temp.bilingType = items.bilingType.toString();
          });
          const [temps] = res.data;
          modalData = temps;
          // 排序
          modalData.invTerm.map((item, index) => {
            const temp = item;
            temp.number = index + 1;
            temp.key = index + 1;
          });
          modalData.invMail.cityIdList = [];
          modalData.invMail.cityNameList = '';
          modalData.invMail.areaList.map((cityItem, cityIndex) => {
            modalData.invMail.cityIdList.push(cityItem.areaId);
            modalData.invMail.cityNameList = `${modalData.invMail.cityNameList}${
              cityIndex > 0 ? ' / ' : ''
            }${cityItem.areaName}`;
          });
          // 2 是修改的时候
          if (addOrDetail === 2) {
            if (modalData.invMail.areaList.length) {
              this.update(modalData.invMail.areaList);
            }
          }
          this.setState(
            {
              modalData,
              invPayType: modalData.invMail.invPay.toString(),
              number: modalData.invTerm.length,
            },
            () => {
              this.moneyTotal();
              if (addOrDetail === 2 || addOrDetail === 3) {
                this.getInvTermItem();
              }
            }
          );
        } else {
          message.warning(res.message || '服务端未知错误：获取详情失败！');
        }
      });
    }
  };

  render() {
    const {
      form,
      form: { getFieldDecorator },
      visible,
      handleModalVisible,
      addOrDetail,
      maskClosable,
      detailUpdate,
      loading,
    } = this.props;
    const {
      provCityAreaList,
      invPayType,
      FM_INV_RULE_TYPE,
      modalData,
      FM_INV_FEE_TYPE,
      sumPrice,
      pdList,
      invoiceType,
      FM_INV_RULE_WAY,
      payTypeMailList,
    } = this.state;
    let titleName = '';
    if (addOrDetail === 1) {
      titleName = '新增发票明细';
    } else if (addOrDetail === 2) {
      titleName = '修改发票明细';
    } else {
      titleName = '详情发票明细';
    }
    const formItemLayout = {
      labelCol: { md: { span: 8 } },
      wrapperCol: { md: { span: 16 } },
    };
    const formItemLayout2 = {
      labelCol: { span: 2 },
      wrapperCol: { span: 14 },
    };
    const columns = [
      {
        title: '序号',
        dataIndex: 'number',
        align: 'center',
        width: 80,
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        render: text => (
          <span
            style={{
              padding: '16px 16px',
            }}
          >
            {text || '--'}
          </span>
        ),
      },
      {
        title: '产品',
        dataIndex: 'pdId',
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        width: 200,
        render: (text, record) =>
          addOrDetail === 1 || addOrDetail === 2 ? (
            <FormItem style={{ margin: '3px 0 3px 12px' }} {...formItemLayout2}>
              {getFieldDecorator(`pdId${record.key}`, {
                rules: [{ required: true, message: '请选择' }],
                initialValue: `${text}` || undefined,
              })(
                <Select
                  style={{ width: 190 }}
                  notFoundContent="暂无数据"
                  label="&nbsp;"
                  colon={false}
                  placeholder="请选择"
                  onChange={value => {
                    this.changepdBillType(value, record.number, 'pd', record.key);
                  }}
                >
                  {pdList.map(item => (
                    <Option value={item.pdId} key={item.pdId} title={item.pdName}>
                      {item.pdName}
                    </Option>
                  ))}
                </Select>
              )}
            </FormItem>
          ) : (
            <span
              style={{
                padding: '16px 16px',
              }}
            >
              {text || '--'}
            </span>
          ),
      },
      {
        title: '费用类型',
        dataIndex: 'bilingType',
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        width: 200,
        render: (text, record) => (
          <FormItem style={{ margin: '3px 0 3px 12px' }} {...formItemLayout2}>
            {getFieldDecorator(`bilingType${record.key}`, {
              rules: [{ required: true, message: '请选择' }],
              initialValue: text || undefined,
            })(
              <Select
                style={{ width: 190 }}
                notFoundContent="暂无数据"
                label="&nbsp;"
                colon={false}
                placeholder="请选择"
                onChange={value => {
                  this.changepdBillType(value, record.number, 'bilingType', record.key);
                }}
              >
                {FM_INV_FEE_TYPE.map(item => (
                  <Option value={item.itemCode} key={item.itemCode}>
                    {item.itemName}
                  </Option>
                ))}
              </Select>
            )}
          </FormItem>
        ),
      },
      {
        title: '开票项目',
        dataIndex: 'invTerm',
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        width: 200,
        render: (text, record) =>
          addOrDetail === 1 || addOrDetail === 2 ? (
            <FormItem style={{ margin: '3px 0 3px 12px' }} {...formItemLayout2}>
              {getFieldDecorator(`invTerm${record.key}`, {
                rules: [{ required: true, message: '请选择' }],
                initialValue: text || undefined,
              })(
                <Select
                  style={{ width: 190 }}
                  notFoundContent="暂无数据"
                  label="&nbsp;"
                  colon={false}
                  placeholder="请选择"
                  onChange={value => {
                    this.invoiceItem(value, record);
                  }}
                >
                  {record &&
                    record.invoiceItemList &&
                    record.invoiceItemList.map(item => (
                      <Option value={item.termId} key={item.termId}>
                        {item.invTerm}
                      </Option>
                    ))}
                </Select>
              )}
            </FormItem>
          ) : (
            <span
              style={{
                padding: '16px 16px',
              }}
            >
              {text || '--'}
            </span>
          ),
      },
      {
        title: '税率（%）',
        dataIndex: 'invRatio',
        width: 100,
        align: 'center',
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        render: text => (
          <span
            style={{
              padding: '16px 16px',
            }}
          >
            {text === 0 ? 0 : (text && text) || '--'}
          </span>
        ),
      },
      {
        title: '开票金额（元）',
        dataIndex: 'invAmount',
        width: 130,
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'right',
          },
        }),
        render: (text, record) =>
          addOrDetail === 1 || addOrDetail === 2 ? (
            <FormItem style={{ margin: '3px 0 3px 25px' }} {...formItemLayout2}>
              {getFieldDecorator(`44payW1ay${record.key}`, {
                rules: [{ required: true, message: '请输入' }],
                initialValue: text === 0 ? 0 : (text && text) || undefined,
              })(
                <InputNumber
                  style={{ width: 90 }}
                  min={0.01}
                  precision={2}
                  placeholder="请输入"
                  onChange={value => {
                    this.moneyTotal(value, record.number, 'invAmount');
                  }}
                />
              )}
            </FormItem>
          ) : (
            <span
              style={{
                padding: '16px 16px',
              }}
            >
              {text === 0 ? 0 : (text && text) || '--'}
            </span>
          ),
      },
      {
        title: '操作',
        dataIndex: 'number5',
        width: 80,
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: (text, record) => (
          <Popconfirm title="确定要删除此行？" onConfirm={() => this.deleteInv(record)}>
            <a
              style={{
                padding: '16px 16px',
              }}
              disabled={modalData.invTerm.length === 1}
            >
              删除
            </a>
          </Popconfirm>
        ),
      },
    ];

    const columns1 = [
      {
        title: '序号',
        dataIndex: 'number',
        align: 'center',
        width: 50,
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        render: text => (
          <span
            style={{
              padding: '16px 16px',
            }}
          >
            {text || '--'}
          </span>
        ),
      },
      {
        title: '产品',
        dataIndex: 'pdName',
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        width: 220,
        render: text => (
          <span
            style={{
              padding: '16px 16px',
            }}
          >
            {text || '--'}
          </span>
        ),
      },
      {
        title: '费用类型',
        dataIndex: 'bilingTypeName',
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        width: 220,
        render: text => (
          <span
            style={{
              padding: '16px 16px',
            }}
          >
            {text || '--'}
          </span>
        ),
      },
      {
        title: '开票项目',
        dataIndex: 'invTermName',
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        width: 220,
        render: text => (
          <span
            style={{
              padding: '16px 16px',
            }}
          >
            {text || '--'}
          </span>
        ),
      },
      {
        title: '税率（%）',
        dataIndex: 'invRatio',
        width: 100,
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: text => (
          <span
            style={{
              padding: '16px 16px',
            }}
          >
            {text === 0 ? 0 : (text && text) || '--'}
          </span>
        ),
      },
      {
        title: '开票金额（元）',
        dataIndex: 'invAmount',
        width: 130,
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'right',
          },
        }),
        render: text => (
          <span
            style={{
              padding: '16px 16px',
            }}
          >
            {text === 0 ? 0 : (text && text) || '--'}
          </span>
        ),
      },
    ];

    const onClose = () => (
      <Button
        key="submit"
        type="primary"
        onClick={() =>
          this.setState(
            {
              modalData: {
                invCompany: {},
                invMail: {},
                invTerm: [
                  {
                    key: 1,
                    number: 1,
                    pdId: '',
                    bilingType: '',
                    number3: '',
                    invRatio: '',
                  },
                ],
              },
              invPayType: '1',
              sumPrice: 0,
            },
            () => {
              form.resetFields();
              handleModalVisible(1, false);
            }
          )
        }
      >
        关闭
      </Button>
    );
    const onCancel = () => (
      <Button
        key="back"
        onClick={() =>
          this.setState(
            {
              modalData: {
                invCompany: {},
                invMail: {},
                invTerm: [
                  {
                    key: 1,
                    number: 1,
                    pdId: '',
                    bilingType: '',
                    number3: '',
                    invRatio: '',
                  },
                ],
              },
              invPayType: '1',
              sumPrice: 0,
            },
            () => {
              form.resetFields();
              handleModalVisible(addOrDetail, false);
            }
          )
        }
      >
        取消
      </Button>
    );
    const onOk = () => (
      <Button key="submit" type="primary" onClick={() => this.submitModal()}>
        提交
      </Button>
    );

    return (
      <div>
        <Modal
          title={titleName}
          closable
          maskClosable={maskClosable}
          destroyOnClose
          visible={visible}
          onOk={this.handleOk}
          onCancel={
            addOrDetail === 3 || addOrDetail === 4
              ? () =>
                  this.setState(
                    {
                      modalData: {
                        invCompany: {},
                        invMail: {},
                        invTerm: [
                          {
                            key: 1,
                            number: 1,
                            pdId: '',
                            bilingType: '',
                            number3: '',
                            invRatio: '',
                          },
                        ],
                      },
                      invPayType: '1',
                      sumPrice: 0,
                    },
                    () => {
                      form.resetFields();
                      handleModalVisible(1, false);
                    }
                  )
              : () =>
                  this.setState(
                    {
                      modalData: {
                        invCompany: {},
                        invMail: {},
                        invTerm: [
                          {
                            key: 1,
                            number: 1,
                            pdId: '',
                            bilingType: '',
                            number3: '',
                            invRatio: '',
                          },
                        ],
                      },
                      invPayType: '1',
                      sumPrice: 0,
                    },
                    () => {
                      form.resetFields();
                      handleModalVisible(addOrDetail, false);
                    }
                  )
          }
          footer={
            addOrDetail === 3 || addOrDetail === 4
              ? [
                  detailUpdate === 1 && (
                    <Button key="update" onClick={() => this.changeUpdate()}>
                      修改
                    </Button>
                  ),
                  onClose(),
                ]
              : [onCancel(), onOk()]
          }
          width="1103px"
        >
          <Spin spinning={loading}>
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col md={12} sm={24} pull={2}>
                <FormItem {...formItemLayout} label="开票类型" className={styles.pdSet}>
                  {getFieldDecorator('invType', {
                    rules: [{ required: addOrDetail === 1, message: '请选择' }],
                    initialValue: modalData.invCompany.invType,
                  })(
                    addOrDetail === 1 ? (
                      <Select
                        onChange={e => this.changeInvType(e)}
                        style={{ width: '100%' }}
                        placeholder="请选择"
                        allowClear
                      >
                        {FM_INV_RULE_TYPE.map(item => (
                          <Option key={item.itemCode} value={item.itemCode}>
                            {item.itemName}
                          </Option>
                        ))}
                      </Select>
                    ) : (
                      <span>{modalData.invCompany.invTypeName || '--'}</span>
                    )
                  )}
                </FormItem>
              </Col>

              {addOrDetail === 4 ? (
                <Col md={12} sm={24} pull={1}>
                  <FormItem {...formItemLayout} label="发票状态" className={styles.pdSet}>
                    {getFieldDecorator('invState', {
                      rules: [{ required: addOrDetail === 1, message: '请选择' }],
                      initialValue: modalData.invCompany.invState,
                    })(
                      addOrDetail === 1 ? (
                        <Select
                          onChange={e => this.changeInvType(e)}
                          style={{ width: '100%' }}
                          placeholder="请选择"
                          allowClear
                        >
                          {FM_INV_RULE_TYPE.map(item => (
                            <Option key={item.itemCode} value={item.itemCode}>
                              {item.itemName}
                            </Option>
                          ))}
                        </Select>
                      ) : (
                        <span>{modalData.invCompany.invStateName || '--'}</span>
                      )
                    )}
                  </FormItem>
                </Col>
              ) : (
                <Col md={12} sm={24} />
              )}
            </Row>
            {addOrDetail === 4 ? <Divider dashed style={{ marginTop: 0 }} /> : null}
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col md={12} sm={24} pull={2}>
                <FormItem {...formItemLayout} label="单位名称" className={styles.pdSet}>
                  {getFieldDecorator('holderName', {
                    rules: [
                      {
                        required: !!(addOrDetail === 1 || addOrDetail === 2),
                        message: '输入的内容必须在1-100个字',
                      },
                    ],
                    initialValue: modalData.invCompany.holderName,
                  })(
                    addOrDetail === 1 || addOrDetail === 2 ? (
                      <Input placeholder="请输入" maxLength={100} />
                    ) : (
                      <span>{modalData.invCompany.holderName || '--'}</span>
                    )
                  )}
                </FormItem>
              </Col>
              <Col md={12} sm={24} pull={1}>
                <FormItem {...formItemLayout} label="纳税人识别号" className={styles.pdSet}>
                  {getFieldDecorator('taxerIdNo', {
                    rules: [
                      {
                        required: !!(addOrDetail === 1 || addOrDetail === 2),
                        message: '最大长度不超过18位的数字或字母',
                        pattern: /^[a-zA-Z0-9]{1,18}$/,
                      },
                    ],
                    initialValue: modalData.invCompany.taxerIdNo,
                  })(
                    addOrDetail === 1 || addOrDetail === 2 ? (
                      <Input placeholder="请输入" maxLength={19} />
                    ) : (
                      <span>{modalData.invCompany.taxerIdNo || '--'}</span>
                    )
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col md={12} sm={24} pull={2}>
                <FormItem {...formItemLayout} label="单位地址" className={styles.pdSet}>
                  {getFieldDecorator('holderAddrs', {
                    rules: [
                      {
                        required:
                          (addOrDetail === 1 && invoiceType === '3') ||
                          (addOrDetail === 2 && invoiceType === '3'),
                        message: '请输入',
                      },
                    ],
                    initialValue: modalData.invCompany.holderAddrs,
                  })(
                    addOrDetail === 1 || addOrDetail === 2 ? (
                      <Input placeholder="请输入" />
                    ) : (
                      <span>{modalData.invCompany.holderAddrs || '--'}</span>
                    )
                  )}
                </FormItem>
              </Col>
              <Col md={12} sm={24} pull={1}>
                <FormItem {...formItemLayout} label="电话" className={styles.pdSet}>
                  {getFieldDecorator('phone', {
                    rules: [
                      {
                        required:
                          (addOrDetail === 1 && invoiceType === '3') ||
                          (addOrDetail === 2 && invoiceType === '3'),
                        message: '固话或手机',
                        pattern: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,12}$/,
                      },
                    ],
                    initialValue: modalData.invCompany.phone,
                  })(
                    addOrDetail === 1 || addOrDetail === 2 ? (
                      <Input placeholder="请输入" />
                    ) : (
                      <span>{modalData.invCompany.phone || '--'}</span>
                    )
                  )}
                </FormItem>
              </Col>
            </Row>

            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col md={12} sm={24} pull={2}>
                <FormItem {...formItemLayout} label="开户行" className={styles.pdSet}>
                  {getFieldDecorator('bankOfDepoName', {
                    rules: [
                      {
                        required:
                          (addOrDetail === 1 && invoiceType === '3') ||
                          (addOrDetail === 2 && invoiceType === '3'),
                        message: '请输入的内容必须在1-100个字',
                      },
                    ],
                    initialValue: modalData.invCompany.bankOfDepoName,
                  })(
                    addOrDetail === 1 || addOrDetail === 2 ? (
                      <Input placeholder="请输入" maxLength={100} />
                    ) : (
                      <span>{modalData.invCompany.bankOfDepoName || '--'}</span>
                    )
                  )}
                </FormItem>
              </Col>
              <Col md={12} sm={24} pull={1}>
                <FormItem {...formItemLayout} label="银行卡号" className={styles.pdSet}>
                  {getFieldDecorator('bankAcco', {
                    rules: [
                      {
                        required:
                          (addOrDetail === 1 && invoiceType === '3') ||
                          (addOrDetail === 2 && invoiceType === '3'),
                        message: '最大长度不超过25位数字',
                        pattern: /^\d{1,25}$/,
                      },
                    ],
                    initialValue: modalData.invCompany.bankAcco,
                  })(
                    addOrDetail === 1 || addOrDetail === 2 ? (
                      <Input placeholder="请输入" maxLength={26} />
                    ) : (
                      <span>{modalData.invCompany.bankAcco || '--'}</span>
                    )
                  )}
                </FormItem>
              </Col>
            </Row>

            <Table
              dataSource={modalData.invTerm}
              columns={addOrDetail === 1 || addOrDetail === 2 ? columns : columns1}
              bordered
              rowKey={record => record.number}
              pagination={false}
              className={addOrDetail === 1 || addOrDetail === 2 ? styles.invRowPadding : null}
            />

            {addOrDetail === 1 || addOrDetail === 2 ? (
              <Button
                style={{ width: '100%', height: '45px', margin: '5px 0 0 0' }}
                type="dashed"
                icon={<PlusOutlined />}
                onClick={() => {
                  this.addInvList();
                }}
              >
                新增
              </Button>
            ) : null}
            <Row style={{ margin: '20px 0 0 0' }} gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col md={12} sm={24} pull={1}>
                <FormItem {...formItemLayout} label="备注" className={styles.pdSet}>
                  {getFieldDecorator('remark', {
                    rules: [{ required: false }],
                    initialValue: modalData.invCompany.remark,
                    message: '请输入的内容必须在1-200个字',
                  })(
                    addOrDetail === 1 || addOrDetail === 2 ? (
                      <Input placeholder="请输入" maxLength={200} />
                    ) : (
                      <span>{modalData.invCompany.remark || '--'}</span>
                    )
                  )}
                </FormItem>
              </Col>
              <Col md={12} sm={24} pull={1}>
                <FormItem {...formItemLayout} label="开票金额合计" className={styles.pdSet}>
                  <span>{sumPrice === 0 ? 0 : sumPrice.toFixed(2)}</span>
                </FormItem>
              </Col>
            </Row>
            {modalData.invCompany.invType === '1' ||
            modalData.invCompany.invType === '2' ||
            modalData.invCompany.invType === '3' ? (
              <Divider dashed style={{ marginTop: 0 }} />
            ) : null}
            {modalData.invCompany.invType === '2' ? (
              <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                <Col md={12} sm={24} pull={1}>
                  <FormItem {...formItemLayout} label="发票交付方式" className={styles.pdSet}>
                    {getFieldDecorator('invPayE', {
                      rules: [{ required: false, message: '请选择' }],
                      initialValue: '3',
                    })(
                      addOrDetail === 1 || addOrDetail === 2 ? (
                        <Radio.Group>
                          {payTypeMailList.map(item => (
                            <Radio key={item.itemCode} value={item.itemCode}>
                              {item.itemName}
                            </Radio>
                          ))}
                        </Radio.Group>
                      ) : (
                        <span>{modalData.invMail.invPayName}</span>
                      )
                    )}
                  </FormItem>
                </Col>
                <Col md={12} sm={24} pull={1}>
                  <FormItem {...formItemLayout} label="邮箱地址" className={styles.pdSet}>
                    {getFieldDecorator('email', {
                      rules: [
                        { required: addOrDetail === 1 || addOrDetail === 2, message: '请选择' },
                      ],
                      initialValue: modalData.invMail.email,
                    })(
                      addOrDetail === 1 || addOrDetail === 2 ? (
                        <Input placeholder="请输入" maxLength={100} />
                      ) : (
                        <span>{modalData.invMail.email || '--'}</span>
                      )
                    )}
                  </FormItem>
                </Col>
              </Row>
            ) : null}

            {modalData.invCompany.invType === '1' || modalData.invCompany.invType === '3' ? (
              <div>
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                  <Col md={12} sm={24} pull={1} style={{ margin: '0 0 0 -25px' }}>
                    <FormItem {...formItemLayout} label="发票交付方式" className={styles.pdSet}>
                      {getFieldDecorator('invPay', {
                        rules: [{ required: false }],
                        initialValue:
                          (modalData.invMail &&
                            modalData.invMail.invPay &&
                            modalData.invMail.invPay.toString()) ||
                          '1',
                      })(
                        addOrDetail === 1 || addOrDetail === 2 ? (
                          <Radio.Group
                            onChange={e => {
                              this.changeInvPayType(e);
                            }}
                          >
                            {FM_INV_RULE_WAY.map(item => (
                              <Radio key={item.itemCode} value={item.itemCode}>
                                {item.itemName}
                              </Radio>
                            ))}
                          </Radio.Group>
                        ) : (
                          <span>{modalData.invMail.invPayName}</span>
                        )
                      )}
                    </FormItem>
                  </Col>
                  <Col md={12} sm={24} />
                </Row>

                {invPayType === '1' ? (
                  <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={12} sm={24} pull={1} style={{ margin: '0 0 0 -25px' }}>
                      <FormItem {...formItemLayout} label="联系人姓名" className={styles.pdSet}>
                        {getFieldDecorator('contPerName', {
                          rules: [
                            {
                              required: addOrDetail === 1 || addOrDetail === 2,
                              message: '请输入的内容必须在1-30个字',
                              pattern: /^[A-Za-z\u4e00-\u9fa5\0-9]{1,30}$/,
                            },
                          ],
                          initialValue: modalData.invMail.contPerName,
                        })(
                          addOrDetail === 1 || addOrDetail === 2 ? (
                            <Input placeholder="请输入" maxLength={30} />
                          ) : (
                            <span>{modalData.invMail.contPerName || '--'}</span>
                          )
                        )}
                      </FormItem>
                    </Col>
                    <Col md={12} sm={24} pull={1}>
                      <FormItem {...formItemLayout} label="联系人电话" className={styles.pdSet}>
                        {getFieldDecorator('contPerPhone', {
                          rules: [
                            {
                              required: addOrDetail === 1 || addOrDetail === 2,
                              message: '请正确输入手机号码或固话(最大限制12位)',
                              pattern: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,12}$/,
                            },
                          ],
                          initialValue: modalData.invMail.contPerPhone,
                        })(
                          addOrDetail === 1 || addOrDetail === 2 ? (
                            <Input placeholder="请输入" maxLength={12} />
                          ) : (
                            <span>{modalData.invMail.contPerPhone || '--'}</span>
                          )
                        )}
                      </FormItem>
                    </Col>
                  </Row>
                ) : null}
                {invPayType === '1' ? (
                  <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={12} sm={24} pull={1} style={{ margin: '0 0 0 -25px' }}>
                      <FormItem {...formItemLayout} label="邮寄地址" className={styles.pdSet}>
                        {getFieldDecorator('mailArea', {
                          rules: [
                            {
                              type: 'array',
                              required: addOrDetail === 1 || addOrDetail === 2,
                              message: '请选择(区或县级)',
                              len: 3,
                            },
                          ],
                          initialValue: modalData.invMail.cityIdList,
                        })(
                          addOrDetail === 1 || addOrDetail === 2 ? (
                            <Cascader
                              placeholder="请选择"
                              options={provCityAreaList}
                              loadData={this.loadAreaData}
                              style={{ width: '100%' }}
                              onChange={(value, selectedOptions) =>
                                this.selectProvCityArea(value, selectedOptions)
                              }
                              changeOnSelect
                            />
                          ) : (
                            <span>{modalData.invMail.cityNameList || '--'}</span>
                          )
                        )}
                      </FormItem>
                    </Col>

                    <Col md={12} sm={24} pull={1}>
                      <FormItem {...formItemLayout} label="详细地址" className={styles.pdSet}>
                        {getFieldDecorator('mailAddr', {
                          rules: [
                            { required: addOrDetail === 1 || addOrDetail === 2, message: '请选择' },
                          ],
                          initialValue: modalData.invMail.mailAddr,
                        })(
                          addOrDetail === 1 || addOrDetail === 2 ? (
                            <Input placeholder="请输入" />
                          ) : (
                            <span>{modalData.invMail.mailAddr || '--'}</span>
                          )
                        )}
                      </FormItem>
                    </Col>
                  </Row>
                ) : null}
              </div>
            ) : null}
          </Spin>
        </Modal>
      </div>
    );
  }
}

export default FileUpload;
